
<template>
  <!-- 点击事件触发搜索模态框的打开 -->
  <div class="" @click="handleClick">
    <!-- 允许组件内容的自定义 -->
    <slot />
  </div>
</template>

<script setup>
// 导入主题存储以访问和响应主题变化
import { useThemeStore } from '$/store/theme/index.js'

// 使用VueUse库来监听键盘事件
import { useMagicKeys, whenever } from '@vueuse/core'

// 初始化主题存储
const themeStore = useThemeStore()

// 通过依赖注入获取当前活动的标签页
const activeTab = inject('activeTab')

// 定义快捷提示文本
const shortcutTip = 'Ctrl + F'

// 监听主题和活动标签页的变化，当任一值变化时，关闭搜索模态框
watch([() => themeStore.value, () => activeTab.value], () => {
  closeSearchModal()
})

// 打开搜索模态框的函数
function openSearchModal() {
  window.findInPageModal.open({ isDark: themeStore.isDark })
}

// 点击事件处理函数，调用打开搜索模态框的函数
const handleClick = openSearchModal

// 关闭搜索模态框的函数
function closeSearchModal() {
  window.findInPageModal.close()
}

// 使用VueUse的useMagicKeys监听键盘事件，以检测Ctrl + F的组合键
const { ctrl_f } = useMagicKeys()

// 当检测到Ctrl + F组合键按下时，调用打开搜索模态框的函数
whenever(ctrl_f, () => {
  openSearchModal()
})
</script>

<style lang="postcss"></style>

